<template>
  <div class="padpas">
    <div
      @click="hideorshow(index)"
      class="rrouppp"
      v-for="(item,index) in listArr"
      :key="index"
    >
      <p :class="indexs === index ? 'active' : 'normal' ">{{index+1}}、{{item.question}}</p>
      <p
        v-html="item.answer"
        class="answer"
        v-if="indexs === index"
      ></p>
    </div>
    <!-- <div class="fixfix">
      <router-link
        to="/help/helps"
        class="return"
      >
        <p>返回帮助中心</p>
      </router-link>
    </div> -->
  </div>
</template>
<script>
import { listhelp } from '@/api/center'
export default {
  data () {
    return {
      listArr: [],
      indexs: -1
    }
  },
  created () {
    // console.log(this.$route.query.fication_id)
    this.getxinxin()
  },
  methods: {
    hideorshow (index) {
      if (this.indexs === index) {
        this.indexs = -1
      } else {
        this.indexs = index
      }
    },
    getxinxin () {
      var obj = {
        fication_id: this.$route.query.fication_id,
        app_id: 'Zmli'
      }
      listhelp(obj)
        .then(res => {
          this.$store.commit('updateLoadingStatus', { isLoading: false })
          if (res.data.code === 200) {
            var temp = res.data.data
            this.listArr = temp
            // console.log(this.listArr)
          }
        })
    }
  }
}
</script>

<style  scoped>
* {
  padding: 0;
  margin: 0;
}
.padpas {
  padding-bottom: 82px;
}
.rrouppp {
  padding-top: 10px;
  padding-bottom: 14px;
  width: 100%;
  padding-left: 25px;
  box-sizing: border-box;
  font-family: PingFangSC-Medium;
  font-size: 15px;
  letter-spacing: 1px;
}
.active {
  background: url('https://o6wndwjxn.qnssl.com/%E7%AE%AD%E5%A4%B4@3x.png')
    no-repeat 90% 5px;
  background-size: 10px;
  color: #da4131;
  font-family: PingFangSC-Medium;
}
.answer {
  margin-top: 12px;
  font-family: PingFangSC-Medium;
  letter-spacing: 1px;
  background-color: #f7f7f7;
  border-radius: 5px;
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #666666;
  width: 91%;
  padding: 15px;
  box-sizing: border-box;
}
.ptext {
  width: 100%;
  height: 15px;
  margin-left: 16px;
  font-size: 15px;
  line-height: 15px;
  font-family: PingFangSC-Medium;
  color: #1a1a1a;
  margin-bottom: 10px;
  font-weight: 600;
}
.normal {
  background: url(http://o6wndwjxn.qnssl.com/e1c44201811100945557460.png)
    no-repeat 90% 5px;
  background-size: 10px;
}
.fixfix {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: #fff;
  display: flex;
  align-items: center;
}
.return {
  display: block;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  height: 40px;
  background-color: #fff;
  width: 50%;
  line-height: 40px;
  border-radius: 20px;
  border: solid 1.5px #f29911;
}
.return > p {
  margin: 7px;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 20px;
  letter-spacing: 1px;
  color: #f29911;
}
</style>
